<!--
 * @Description: vuex 测试使用
 * @Version: 1.0
 * @Autor: wangqiang
 * @Date: 2021-07-01 10:01:51
 * @LastEditors: wangqiang
 * @LastEditTime: 2021-07-01 11:25:53
-->
<template>
    <div class="vuex">
        <h2>获取themeConfig模块状态数据</h2>
        <p :style="{ color: themeColor }">主题颜色： {{themeColor}}</p>
        <button @click="editColor">改变主题颜色</button>

        <h2>获取userInfos模块状态数据</h2>
        <button @click="setToken">设置token</button>
        <button @click="setLogin">设置登录状态</button>
        <p>token：{{token}}</p>
        <p>登录状态：{{status ? '登录' : '未登录'}}</p>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { useStore } from '@/store'
import { Toast } from 'vant'

export default defineComponent({
    name: 'vuex',
    setup () {
        // 获取vuex实例
        const store = useStore()
        let themeColor = computed(()=>{
            return store.state.themeConfig.themeColor
        })
        let token = computed(() => store.state.userInfos.token)
        let status = computed(() => store.state.userInfos.isLogin)

        // 修改主题颜色
        const editColor = () => {
            store.commit('themeConfig/setThemeColor', 'skyblue')
        }
        // 设置token
        const setToken = () => {
            store.commit('userInfos/setToken', 'wedwefbwrnf2134124==')
        }
        // 设置登录状态
        const setLogin = () => {
            store.dispatch('userInfos/asyncSetLogin', true).then(() => {
                Toast('登陆成功')
            })
        }
        return {
            // state
            themeColor,
            token,
            status,
            
            // function
            editColor,
            setToken,
            setLogin
        }
    }
})
</script>

<style scoped>
h2{
    margin-top: 12px;
}
p{
    margin-top: 12px;
    font-size: 14px;
}
button{
    margin-top: 10px;
}
</style>